import React, { Component } from 'react'
import { NavLink } from 'react-router-dom';
import { Carousel, WingBlank, Tabs, WhiteSpace } from 'antd-mobile';
import Downmenu from '../../components/Downmenu/Downmenu';
import Tab from './Tab/tab'
import List from './Tab/list'
import Bottombar from '../../components/Bottombar/Bottombar'
import Say from '../../components/Say/Say'
import Danmu from './Danmu/Danmu'
import './Home.css'
import study1 from '../../img/study1.jpg'
import study2 from '../../img/study2.jpg'
import study3 from '../../img/study3.jpg'

class Home extends Component {
	state = {
		videoURL: 'http://www.hebtu.edu.cn/resources/42/20210316122604932.mp4',
		data: ['1', '2', '3'],
		src: [study1, study2, study3],
		text: ['找学友', '找资料', '小纸条'],
		topath: ['/Superway1', 'Superway2', 'Superway3'],
		imgHeight: '500px',
		imgWidth: '100%',
		activityData: [],
		attr: 'https://www.prebeauty.work'
	}

	componentDidMount() {
		setTimeout(() => {
			this.setState({
				data: ['1', '2', '3'],
			});
		}, 200);

		this.getActivityData()
	}

	getActivityData() {
		fetch("https://www.prebeauty.work/activity")
			.then((res) => res.json())
			.then(data => {
				var newData = []
				newData = data.sort(function (a, b) {
					if (a.time !== b.time) {
						return b.time - a.time;
					} else {
						return b.look - a.look;
					}}).slice(0, 2)
				newData.map(data => {
					data.time = this.timeTrans(data.time)
				})
				this.setState({
					activityData: newData
				})
				// console.log(this.state.activityData)
			})
			.catch(err => console.log(err));
	}

	//比较大小
	compare(property) {
		return function (a, b) {
			var value1 = a[property];
			var value2 = b[property];
			return value2 - value1;
		}
	}

	//将时间戳转换成正常时间格式
	timeTrans(date) {
		var date = new Date(date * 1);
		var Y = date.getFullYear() + '-';
		var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
		var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
		return Y + M + D;
	}

	addLook(id,look){
    var b = JSON.stringify({num:Number(look)+1})
    fetch(`https://www.prebeauty.work/activity/${id}`,{method:'PUT',body:b,headers:{'Content-Type':'application/json'}},)
			.then((res) => res.json())
			.then(data => {
        console.log(data)
      })
  }

	render() {
		return (
			<div className="Home" style={{ backgroundColor: '#f5f5f5' }}>
				{/* 标题栏 */}
				<Downmenu />

				{/* 视频 */}
				<video
					id="background-video"
					loop
					autoPlay
					style={{ width: '100%', display: this.state.selectval }}>
					<source src={this.state.videoURL} type="video/mp4" />
				</video>

				{/* 导航 */}
				<div id='daohang'>
					<NavLink exact to='/Activity' id='daohang-item'>
						<div
							className="iconfont icon-nav_activity"
							id='daohang-icon'
							style={{ fontSize: '36px' }}
						></div>
						<div id='daohang-activity-div'>活动广场</div>
					</NavLink>
					<NavLink exact to='/Share' id='daohang-item'>
						<div
							className="iconfont icon-jiaoliu"
							id='daohang-icon'
						></div>
						<div id='daohang-activity-div'>交流圈</div>
					</NavLink>
					<NavLink exact to='/Exchange' id='daohang-item'>
						<div
							className="iconfont icon-tianping"
							id='daohang-icon'
						></div>
						<div id='daohang-activity-div'>闲置阁</div>
					</NavLink>
					<NavLink exact to='/Confession' id='daohang-item'>
						<div
							className="iconfont icon-xindong"
							id='daohang-icon'
							style={{ fontSize: '56px' }}
						></div>
						<div id='daohang-activity-div'>遇见桃花</div>
					</NavLink>
				</div>



				{/* 精选活动 */}
				<div id='jingxuan'>
					<NavLink exact to='/Activity' id='title'>
						<div id='title-div'>精选活动</div>
						<div
							className="iconfont icon-qianjin"
							id='title-icon'
						></div>
					</NavLink>
					{this.state.activityData.map((val, index) => (
						<div id='list-item'
							key={val.id}
							onClick={() => { 
								this.props.history.push('/ActivityDetail', { id: val.id, name: val.name }) 
                this.addLook(val.id,val.look)
							}}>
							<div id='list-item-trimage'>
								<div id='list-item-angle'></div>
								<img src={this.state.attr + val.face} alt='' id='list-item-img' />
							</div>
							<div id='list-item-text'>
								<div id='list-item-text-title' style={{ fontSize: '18px' }}>{val.name}</div><br />
								<div id='list-item-text-context'>地点： {val.place}</div><br />
								<div id='list-item-text-context'>时间： {val.time}</div><br />
								<div style={{textAlign:'right',color:'gray',paddingLeft:'3px'}}>点击量
                  <span style={{color:'#336600',paddingRight:'10px',fontWeight:'bold'}}>{val.look}</span>
                </div>
							</div>
						</div>
					))}
				</div>
				{/* 热门话题 */}
				<div id='hot'>
					<NavLink exact to='/Share' id='title'>
						<div id='title-div'>热门话题</div>
						<div
							className="iconfont icon-qianjin"
							id='title-icon'
						></div>
					</NavLink>
					<List />
				</div>
				{/* 学霸之路 */}
				<div id='study'>
					<div id='title'>
						<div id='title-div'>学霸之路</div>
						<div className="iconfont icon-qianjin" id='title-icon'></div>
					</div>
					<WingBlank style={{ marginLeft: '0px', marginRight: '0px' }}>
						<Carousel className="space-carousel"
							frameOverflow="visible"
							cellSpacing={10}
							slideWidth={0.8}
							autoplay
							infinite
							afterChange={index => this.setState({ slideIndex: index })}
							style={{ padding: '16px', background: '#f5f5f5', overflow: 'hidden' }}
							dots={false}
						>
							{this.state.data.map((val, index) => (
								<a
									key={val}
									href={this.state.topath[val - 1]}
									style={{
										width: this.state.imgWidth,
										height: this.state.imgHeight,
										display: 'block',
										position: 'relative',
										top: this.state.slideIndex === index ? -10 : 0,
										boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
									}}
								>
									<img
										src={this.state.src[val - 1]}
										alt=""
										style={{ width: '100%', verticalAlign: 'top', height: '150px' }}
										onLoad={() => {
											window.dispatchEvent(new Event('resize'));
											this.setState({ imgHeight: 'auto' });
										}}
									/>
									<div id='carousel-text'>{this.state.text[val - 1]}</div>
								</a>
							))}
						</Carousel>
					</WingBlank>
				</div>
				{/* 页脚 */}
				<Bottombar />
			</div>
		)
	}
}

export default Home;

{/* 一枝桃花 */ }
{/* <div id='flower'>
	<Danmu />
</div> */}
{/* 热搜物品 */ }
{/* <div id='goods'>
	<NavLink exact to='/Exchange' id='title'>
		<div style={{ width: '100%', textAlign: 'center', color: 'gray', fontSize: '20px' }}> § 热搜排行 § </div>
	</NavLink>
	<Tab />
	<List />
</div> */}


